<script setup>
const config = import.meta.env
let prefix = ref(config.VITE_BASE_PATH)
const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  isDate: {
    type: Boolean,
    default: true,
  },
  text: {
    type: Array,
    default() {
      return
    },
  },
  w50: {
    type: Boolean,
    default: false,
  },
  w: {
    type: Boolean,
    default: false,
  },
  hideRight: {
    type: Boolean,
    default: false,
  },
  isTotal: {
    type: Boolean,
    default() {
      return false
    },
  },
  bigBg: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['change'])
let active = ref(0)
function handleActive(type) {
  active.value = type
  emits('change', active.value)
}
</script>
<template>
  <div class="content-box h-full">
    <div class="content-header h-36px flex justify-between items-center">
      <div class="content-title text-white text-18px font-bold italic pl-40px">
        {{ props.title }}
      </div>
      <div class="content-right h-36px">
        <div class="date h-36px flex items-center text-14px text-white relative z-2">
          <slot name="rightMenu"></slot>
          <div
            v-for="(item, index) in text"
            @click="handleActive(index)"
            class="date-day h-36px leading-36px text-14px text-center relative cursor-pointer text-center px-10px"
            :class="{
              'text-[#C3E1FF]': active != index,
            }"
          >
            <img
              class="absolute -z-1 w-full h-full left-0 top-0"
              :src="active === index ? '/Images/date-active.png' : '/Images/date.png'"
              alt=""
            />
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="content-roll overflow-hidden w-full relative -top-6px pt-13px pr-14px pb-9px relative"
      :class="{ 'big-bg': props.bigBg }"
    >
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.content-box {
  background: linear-gradient(to bottom, #00103d, transparent);
  .content-header {
    background: url('/Images/title-bg.png') no-repeat;
    background-size: auto 100%;
  }
  .content-roll {
    background: url('/Images/box-bg.png') no-repeat;
    background-size: 100% 100%;
    height: calc(100% - 36px);
    overflow: hidden;
    &.big-bg {
      background: url('/Images/box-bg-2.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
